<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
<link rel="stylesheet" type="text/css" href="css/imageView.css"/>
<style type="text/css">
.data-list-group{
	width: 49%;
	height: auto;
	border-radius:4px;
	background: #fff;
	margin-bottom: 10px;
	overflow: hidden;
}
#data-list{
	justify-content:space-between;
	-webkit-justify-content: space-between;
	flex-wrap:wrap;
	-webkit-flex-wrap: wrap;
}
.luntan-item{
	width: 49%;
	height: auto;
	border-radius:4px;
	background: #fff;
	margin-bottom: 10px;
	overflow: hidden;
}
.luntan-item-img{
	font-size: 0px;
	position: relative;
	height:120px;
	overflow: hidden;
}
.ltimg-icons{
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: 12px;
	text-align: right;
	padding: 3px;
	width: 100%;
	color: #fff;
}
.luntan-title{
	height: 65px; 
	padding:5px;
	color: #777;
	font-size: 14px;
	position: relative;
}
.lt-titme{
	font-size: 12px;
	color: #999;
}
.luntan-user{
	padding:5px;
}
.lt-icon{
	width: 25px;
	height: 25px;
	border-radius: 100px;
	overflow: hidden;
}
.lt-rig{
	flex: 1;
	-webkit-flex: 1;
	padding: 0 0 0 10px;
	font-size: 12px;
	color: #999;
}
.fr{
	float: right;
	color:orange;
}
.topic{
	width: 100%;
	height:45px;
	background: #ddd;
	padding: 5px;
}
#seachinput{
	display: block;
	height:35px;
	font-size: 14px;
	background: url(img/search.png) left center no-repeat #fff;
	background-size: 20px 20px;
	text-indent: 20px;
	box-shadow:0 0 1px #ccc;
	border-width: 0;
	-webkit-box-shadow:0 0 1px #ddd;
}
#index-toppic{
	font-size: 0;
}
#data-list{
	padding:5px;
}
.titlebox{
	width: auto;
	height: 45px;
	padding: 5px;
}
.titleixon{
	width: 25px;
	height: 25px;
	border-radius: 30px;
	background:orangered;
	text-align: center;
	line-height: 25px;
	color: #fff;
}
.titlelabel{
	flex: 1;
	-webkit-flex: 1;
	padding-left: 10px;
}
</style>
</head>
<body>
<div id="jcontent" class="jcontent">
<div class="topic">
	<input class="taped taped-11" readonly="readonly" id="seachinput" type="text" placeholder="请输入搜索关键字"/>
</div>
<div id="index-toppic"><img src="./img/1.png"  class="img"/></div>
<div class="titlebox jflex vcenter">
	<div class="titleixon"><i class="iconfont icon-i9"></i></div>
	<div class="titlelabel">热门帖子</div>
</div>

<div id="data-list" class="jflex">
	
</div>
<div id="loadingMore"></div>
</div>
<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/template.js" type="text/javascript" charset="utf-8"></script>
<script src="js/page.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.lazyload.js"></script>
<script src="js/mui.lazyload.img.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.plusReady(function() {
	_currentWebview=plus.webview.currentWebview();
	//滚动到底部
	document.addEventListener( "plusscrollbottom",function(){
		loadUtil.scrollBottom({
			callBack:function(){
				imgAjaxLazy();
			}
		});
	}, false );
	//下拉加载最新数据 
	_currentWebview.setPullToRefresh(webapp.config.pullRefresh,function(){
		loadUtil.pullToRefresh({
			callBack:function(){
				imgAjaxLazy();
			}
		});
	});
	
	lazyLoadApi = mui(document).imageLazyload({
		autoDestroy: false,
		duration:300
	});
});
function imgAjaxLazy(){
	window.setTimeout(function(){
		lazyLoadApi.refresh(true);
	},100);
}
/**
 * 
 * 发布帖子
 * 
 */
window.addEventListener("indexRiconClick", function(e) {
	webapp.openByTpl({
		title:"发布帖子",
		ricon:"发布",
		hrefs:"/tpl/addTz.html"
	});
});

/***
 * 
 * 加载数据
 * 
 */
window.addEventListener("loadList", function(e) {
	loadUtil.loadList({
		url:"/carLife/admin/interface/post/selectPageById",
		callBack:function(){
			imgAjaxLazy();
		}
	});
});
window.addEventListener("updateList", function(e) {
	loadUtil.pullToRefresh({
		callBack:function(){
			imgAjaxLazy();
		}
	});
	plus.webview.getTopWebview().hide("auto");
	webapp.closeWaiting();
	mui.toast("发布成功");
});

mui('#jcontent').on('tap','.taped-5', function() {
	var thisId=this.getAttribute("data-id");
	webapp.openByTpl({
		title:"帖子详情",
		hrefs:"/tpl/tiezi.html?id="+thisId
	});
});

mui('#jcontent').on('tap','.taped-11', function() {
	//搜索
	webapp.openByTpl({
		title:"关键字搜索",
		hrefs:"/tpl/searchtz.html?keyword="+document.getElementById("seachinput").value
	});
});

/**
 * 监听搜索事件
 */
window.addEventListener("searchList", function(e) {
	webapp.showWaiting();
	document.getElementById("seachinput").value=e.detail.keyword;
	document.getElementById("data-list").innerHTML="";
	loadUtil.loadList({
		url:"/carLife/admin/interface/post/selectPageById?keyWord="+e.detail.keyword
	});
	//清空数据区域
	window.setTimeout(function(){
		plus.webview.getTopWebview().hide("auto");
	},350);
});
</script>

<script id="tpl-list" type="text/html">
	
	{{each data as item i}}
	<div class="luntan-item list-item taped taped-5" data-id="{{item.id}}">
		<div class="luntan-item-img">
			{{if item.imagesList.length==0}}
			<img class="img" src="img/zw4.png"/>
			{{/if}}
			{{each item.imagesList as imgeItem j}}
			{{if j==0}}
			<img class="img" data-lazyload="{{imgPath}}{{imgeItem.path}}-120{{imgeItem.type}}" src="{{imgPath}}{{imgeItem.path}}-120{{imgeItem.type}}"/>
			{{/if}}
			{{/each}}
			<div class="ltimg-icons">
				<i class="iconfont icon-pinglun"></i>
				{{item.commentNum}}
				&nbsp;
				<i class="iconfont icon-i9"></i>
				{{item.praiseNum}}
			</div>
		</div>
		<div class="luntan-title line-b">
			{{item.title}}
			<div class="lt-titme">
				{{dateFormat(item.createTime,'yyyy-MM-dd HH:mm')}}
				<div class="fr">{{item.imagesList.length}}张图</div>
			</div>
		</div>
		
		<div class="luntan-user jflex vcenter">
			<div class="lt-icon">
				<img src="{{imgPath}}{{item.headPortraitMap.path}}-120{{item.headPortraitMap.type}}" class="img"/>
			</div>
			<div class="lt-rig">
				{{item.nickName}}
			</div>
		</div>
	</div>
	{{/each}}

</script>
</body>
</html>
